<template>
  <div id="components-blog-tabs">
    <el-tabs v-model="activeName">
      <el-tab-pane :label="item.label" :name="item.name" v-for="item in list" :key="item.id">
        <slot :name="item.name"></slot>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
export default {
  props: {
    list: Array
  },
  data() {
    return {
      activeName: ''
    }
  },
  created() {
    this.activeName = this.list[0].name
  }
}
</script>

<style lang="scss">
#components-blog-tabs {
  .el-tabs__nav-wrap::after {
    background: none;
  }
  .el-tabs__item.is-active {
    color: #000;
    font-weight: bold;
  }
  .el-tabs__item {
    color: #333;
    font-size: 18px;
  }
  .el-tabs__active-bar {
    background: #000;
  }
}
</style>
